<template>
	<view class="my-popup">
		<view class="my-popup__head">
			<view class="popup-title">{{ info.username || "刘梦溪" }}</view>
			<text class="popup-close" @click="close">
				<i class="iconfont iconguanbi2"></i>
			</text>
		</view>
		<view class="my-popup__body">
			<view class="popup-count">
				<view class="popup-count__right">
					<view v-for="(item,index) in subProjectStatus" :key="index">
						<text class="count-num">{{ item.count }}</text>
						<text class="count-name">{{ item.type }}</text>
					</view>
				</view>
			</view>
			<view class="popup-list">
				<view class="popup-list__item">
					<text>联系方式</text>
					<text>{{ info.phone || "13029209389" }}</text>
				</view>
				<view class="popup-list__item">
					<text>所属单位</text>
					<text>{{ info.orgName || "深圳市地质环境研究院" }}</text>
				</view>
			</view>
			<view class="popup-bottom">
				<view class="popup-bottom_btn" @click="gotoProductDetails(info)">
					<view class="popup_btn_bg"></view>
				详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getPlanStatus } from '@/common/api/map'
	export default {
		name: 'projectPopup',
		props: ['info'],
		data() {
		  return {
				userId: '',
				username: '',
				phone: '',
				subProjectCount: 0,
				subProjectStatus: []
		  };
		},
		mounted() {
			if(this.info.userId && this.info.username && this.info.phone){
				this.userId = this.info.userId
				this.username = this.info.username
				this.phone = this.info.phone
			}
			this.loadPlanStatus()
		},
		methods: {
			close() {
				this.$emit('closePopup', 'people');
			},
			gotoProductDetails(point) {
				uni.navigateTo({
					url: `/pages/peopleInfo/peopleInfo?userId=${point.userId}&userName=${point.username}&phone=${point.phone}`
				})
			},
			gotoStatistics() {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
			},
			loadPlanStatus() {
				getPlanStatus({userId: this.userId}).then(res=>{
					if(res.code == "20000"){
						let data = res.data
						let plans = [
							{type: '本月/计划', count: `${data.monthPlanNum}/${data.monthAllPlanNum || "0"}`},
							{type: '本周/计划', count: `${data.weekPlanNum}/${data.weekAllPlanNum || "0"}`},
							{type: '今日/计划', count: `${data.todayPlanNum}/${data.todayAllPlanNum || "0"}`},
							{type: '本月请假', count: data.monthLeaveNum},
							{type: '本月补卡', count: data.monthMakeUpNum},
							{type: '本月打卡', count: data.monthClockNum},
						]
						this.subProjectStatus = plans
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-popup{
		height: 600rpx;
		background: rgba(5, 38, 102, .8);
		box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.6);
		border-radius: 10px 10px 0px 0px;
		>.my-popup__head{
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0 40rpx 0 60rpx;
			color: #1DCEFD;
			box-sizing: border-box;
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 5%;
				width: 10rpx;
				height: 40rpx;
				border-radius: 4rpx;
				transform: translateY(-50%);
				background: linear-gradient(#00FFFF, #8FEFFF);
			}
			>.popup-title{
				width: 85%;
				height: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 34rpx;
				font-weight: 700;
			}
			i{
				font-size: 40rpx;
			}
		}
		>.my-popup__body{
			>.popup-count{
				display: flex;
				width: 100%;
				height: 200rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				.count-num{
					display: block;
					color: #fff;
					font-weight: 700;
					/deep/ span{
						display: block;
						font-size: 42rpx;
						margin-bottom: 10rpx;
					}
				}
				.count-name{
					color: #00FFFF;
					font-size: 24rpx;
				}
				>.popup-count__left{
					width: 200rpx;
					height: 200rpx;
					padding-top: 40rpx;
					text-align: center;
					box-shadow: 0px -3px 40px 0px rgba(0, 146, 255, 0.9) inset;
					box-sizing: border-box;
				}
				>.popup-count__right{
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					flex-direction:row-reverse;
					box-sizing: border-box;
					>view{
						width: 32%;
						height: 50%;
						padding-top: 8rpx;
						line-height: 1;
						text-align: center;
						box-sizing: border-box;
					}
				}
			}
			>.popup-list{
				width: 100%;
				margin-top: 20rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				>.popup-list__item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 70rpx;
					color: #fff;
					font-size: 24rpx;
					border-bottom: 1px solid #133050;
				}
			}
			>.popup-bottom{
				position: fixed;
				bottom: 40rpx;
				display: flex;
				justify-content: space-evenly;
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				>.popup-bottom_btn{
					position: relative;
					display: block;
					width: 25%;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					border: 1px solid #00FFFF;
					background: #115D9F;
					&::before{
						content: "";
						display: inline-block;
						position: absolute;
						width: 0;
						height: 0;
						top: 0;
						left: -16rpx;
						border-right: 16rpx solid #115D9F;
						border-top: 33rpx solid transparent;
						border-bottom: 33rpx solid transparent;
						z-index: 11;
					}
					&::after{
						content: "";
						display: inline-block;
						position: absolute;
						width: 0;
						height: 0;
						top: 0;
						right: -16rpx;
						border-left: 16rpx solid #115D9F;
						border-top: 33rpx solid transparent;
						border-bottom: 33rpx solid transparent;
						z-index: 11;
					}
					.popup_btn_bg{
						position:absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						&::before{
							content: "";
							display: inline-block;
							position: absolute;
							width: 0;
							height: 0;
							top: -2rpx;
							left: -19rpx;
							border-right: 17rpx solid #00FFFF;
							border-top: 35rpx solid transparent;
							border-bottom: 35rpx solid transparent;
						}
						&::after{
							content: "";
							display: inline-block;
							position: absolute;
							width: 0;
							height: 0;
							top: -2rpx;
							right: -19rpx;
							border-left: 17rpx solid #00FFFF;
							border-top: 35rpx solid transparent;
							border-bottom: 35rpx solid transparent;
						}
					}
				}
			}
		}
	}
</style>
